<template>
  <div
    ref="scrollCon"
    @DOMMouseScroll="handlescroll"
    @mousewheel="handlescroll"
    class="tags-outer-scroll-con">
    <div class="close-all-tag-con">
      <el-dropdown
        size="small"
        trigger="click">
        <el-button
          type="primary"
          size="mini">
          标签选项<i class="el-icon-arrow-down el-icon--right"/>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="handleTagsOption('clearAll')">关闭所有</el-dropdown-item>
          <el-dropdown-item @click.native="handleTagsOption('clearOtherTags')">关闭其他</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div
      ref="scrollBody"
      class="tags-inner-scroll-body"
      :style="{left: tagBodyLeft + 'px'}">
      <transition-group name="taglist-moving-animation">
        <el-tag
          closable
          :key="index"
          v-for="(item, index) in pageTagsList"
          class="ruijie-tag"
          :class="{'ivu-tag-checked':item.name==currentPageName}"
          @click.native="linkTo(item)"
          @close="closePage($event,item.name)"
          ref="tagsPageOpened"
          :name="item.name"
        >
          <span class="ivu-tag-dot-inner"/>  {{ item.title }}
        </el-tag>
      </transition-group>
    </div>
  </div>
</template>
<script type="es6">
export default {
  data () {
    return {
      tagBodyLeft: 0,
      currentPageName: this.$route.name,
      tagsCount: 1
    };
  },
  props: {
    pageTagsList: {
      type: Array,
      default: () => []
    },
    beforePush: {
      type: Function,
      default: () => {
        return true;
      }
    }
  },
  computed: {
    title () {
      return this.$store.state.app.currentTitle;
    },
    tagsList () {
      return this.$store.state.app.pageOpenedList;
    },
    refsTag () {
      if (this.$refs.tagsPageOpened) {
        return this.$refs.tagsPageOpened;
      }
      return [];
    }
  },
  methods: {
    handlescroll () {

    },
    handleTagsOption (type) {
      if (type === 'clearAll') {
        this.$store.commit('clearAllTags');
        this.$router.push({path: '/'});
      } else {
        this.$store.commit('clearOtherTags', this);
      }
      this.tagBodyLeft = 0;
    },
    linkTo (item) {
      let routerObj = {};

      routerObj.name = item.name;
      if (item.argu) {
        routerObj.params = item.argu;
      }
      if (item.query) {
        routerObj.query = item.query;
      }
      if (this.beforePush(item)) {
        this.$router.push(routerObj);
      }
    },
    closePage (event, name) {
      let pageOpenedList = this.$store.state.app.pageOpenedList;
      let lastPageObj = pageOpenedList[0];

      if (this.currentPageName === name) {
        let len = pageOpenedList.length;

        for (let i = 1; i < len; i++) {
          if (pageOpenedList[i].name === name) {
            if (i < (len - 1)) {
              lastPageObj = pageOpenedList[i + 1];
            } else {
              lastPageObj = pageOpenedList[i - 1];
            }
            break;
          }
        }
      } else {
        let tagWidth = event.target.parentNode.offsetWidth;

        this.tagBodyLeft = Math.min(this.tagBodyLeft + tagWidth, 0);
      }
      this.$store.commit('removeTag', name);
      this.$store.commit('closePage', name);
      pageOpenedList = this.$store.state.app.pageOpenedList;
      localStorage.pageOpenedList = JSON.stringify(pageOpenedList);
      if (this.currentPageName === name) {
        this.linkTo(lastPageObj);
      }
      if (pageOpenedList.length === 0) {
        this.$router.push({path: '/'});
      }
    },
    moveToView (tag) {
      if (tag.offsetLeft < -this.tagBodyLeft) {
        // 标签在可视区域左侧
        this.tagBodyLeft = -tag.offsetLeft + 10;
      } else if (tag.offsetLeft + 10 > -this.tagBodyLeft && tag.offsetLeft + tag.offsetWidth < -this.tagBodyLeft + this.$refs.scrollCon.offsetWidth - 100) {
        // 标签在可视区域
        this.tagBodyLeft = Math.min(0, this.$refs.scrollCon.offsetWidth - 100 - tag.offsetWidth - tag.offsetLeft - 20);
      } else {
        // 标签在可视区域右侧
        this.tagBodyLeft = -(tag.offsetLeft - (this.$refs.scrollCon.offsetWidth - 100 - tag.offsetWidth) + 20);
      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.refsTag.forEach((item, index) => {
        if (this.$route.name === item.$attrs.name) {
          let tag = this.refsTag[index].$el;

          this.moveToView(tag);
        }
      });
    }, 1); // 这里不设定时器就会有偏移bug
    this.tagsCount = this.tagsList.length;
  },
  watch: {
    '$route' (to) {
      this.currentPageName = to.name;
      this.$nextTick(() => {
        this.refsTag.forEach((item, index) => {
          if (to.name === item.$attrs.name) {
            let tag = this.refsTag[index].$el;

            this.moveToView(tag);
          }
        });
      });
    }
  }
};
</script>
<style lang="less">
    @import "../../styles/common";
    .tags-outer-scroll-con {
        height: 100%;
        position: relative;
        .tags-inner-scroll-body {
            position: absolute;
            padding: 2px 10px;
            overflow: visible;
            white-space: nowrap;
            transition: left .3s ease;
        }
    }

    .close-all-tag-con {
        position: absolute;
        right: 0;
        top: 0;
        box-sizing: border-box;
        padding-top: 7px;
        text-align: center;
        width: 110px;
        height: 100%;
        background: white;
        box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
        z-index: 10;
    }
    .taglist-moving-animation-move{
        transition: transform .3s;
    }
   .ivu-tag-checked .ivu-tag-dot-inner {
        background: @primaryColor;
    }
    .el-tag.ruijie-tag{
        background: #ffffff;
        border: 1px solid #e9eaec!important;
        color: #495060;
        padding: 0 12px;
        height: 32px;
        line-height: 32px;
        margin: 2px 4px 2px 0;
        cursor: pointer;
    }
    .ivu-tag-dot-inner {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 8px;
        border-radius: 50%;
        background: #e9eaec;
        position: relative;
        top: 1px;
    }
    .el-tag .el-icon-close{
        line-height: 17px;
    }
</style>
